<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="shortcut icon" th:href="@{/favicon.ico}"/>

    <link th:href="@{/easyui/themes/default/easyui.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/easyui/themes/icon.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/selfcss/login.css}" rel="stylesheet" type="text/css"/>


    <script th:src="@{/easyui/jquery.min.js}" type="text/javascript"></script>
    <script th:src="@{/easyui/jquery.easyui.min.js}" type="text/javascript"></script>
    <script th:src="@{/fly/fly.js}" type="text/javascript"></script>
    <script th:src="@{/selfjs/FlyRequest.js}" type="text/javascript"></script>
    <script th:src="@{/commonjs/CommonParam.js}" type="text/javascript"></script>
    <script th:src="@{/commonjs/aes.js}" type="text/javascript"></script>
    <script th:src="@{/commonjs/AesUtil.js}" type="text/javascript"></script>
    <script th:src="@{/commonjs/Barrett.js}" type="text/javascript"></script>
    <script th:src="@{/commonjs/BigInt.js}" type="text/javascript"></script>
    <script th:src="@{/commonjs/pbkdf2.js}" type="text/javascript"></script>
    <script th:src="@{/commonjs/RSA.js}" type="text/javascript"></script>
    <script th:src="@{/commonjs/SHA.js}" type="text/javascript"></script>
</head>

<body>
<div class="login-panel" id="login-panel">
    <form id="loginform" onsubmit="return false" autocomplete="false" method="post">
        <div class="col-lg-12" style="text-align: center;font-size: 20px;padding-bottom: 10px;">
            欢迎使用MDMS
        </div>
        <div class="input-item">
            <input type="text" name="userCode" placeholder="请输入账号"/>
        </div>
        <div class="input-item">
            <input type="password" name="userPassword" placeholder="请输入密码"/>
        </div>
        <div class="input-item">
            <a href="javascript:checkAndLogin()" id="login"> 登录</a>
        </div>
    </form>
</div>

<!-- 绑定谷歌code模块 -->
<div id="bindGoogleAuthDlg" class="easyui-dialog" style="width:500px;height:450px;padding:10px 20px"
     closed="true"  closable="false" modal="true" buttons="#bindGoogleAuthDlg-buttons">
    <form id="bindGoogleAuthForm" method="post" novalidate>
        <input id="binduserid" type="hidden" name="userid"/>
        <img src="" class="height:200px;width:200px" id="bindauthimg" name="authimg" >
        <h5>提示：请下载Authy或其它MFA的app扫描二维码，输入一次性密码，然后绑定</h5>
        <table cellpadding="5">
            <tr>
                <td>一次性密码:</td>
                <td><input name="otp" class="easyui-textbox" type="text" required="true" missingMessage="不能为空"/></td>

            </tr>
        </table>
    </form>
</div>
<div id="bindGoogleAuthDlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveBindGoogleAuth()">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#bindGoogleAuthDlg').dialog('close')">取消</a>
</div>

<!-- 登录校验谷歌code模块 -->
<div id="googleAuthDlg" class="easyui-dialog" style="width:450px;height:230px;padding:10px 20px"
     closed="true"  closable="false" modal="true" buttons="#googleAuthDlg-buttons">
    <form id="googleAuthLoginForm" method="post" novalidate>
        <h5>提示：需输入一次性密码进行二次验证，然后确定</h5>
        <table cellpadding="5">
            <tr>
                <td>一次性密码:</td>
                <td><input name="otp" class="easyui-textbox" type="text" required="true" missingMessage="不能为空"/></td>
            </tr>
        </table>
    </form>
</div>
<div id="googleAuthDlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="googleAuth()">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#googleAuthDlg').dialog('close')">取消</a>
</div>

    <script type="text/javascript">
        $(function () {
            init(true);
            $("input").keyup(function () {
                if ($.trim($("input[name='userCode']").val()) != "" && $.trim($("input[name='userPassword']").val()) != "") {
                    $("#login").css({"cursor": "pointer"});
                } else {
                    $("#login").css({"cursor": "not-allowed"});
                }
            });

            $("#login").click(function () {
                if ($.trim($("input[name='userCode']").val()) == "" || $.trim($("input[name='userPassword']").val()) == "") {
                    return;
                }
                //TODO ajax提交服务端
                console.info("请求服务端登录....")
            });

            $(window).keydown(function(event) {
                if (event.keyCode == 13) {
                    //执行操作
                    checkAndLogin();
                }
            })
        });

        $(window).resize(function () {
            init(false);
        });


        var bgImgWidth = 1920;
        var bgImgHeight = 1080;

        function init(initBg) {
            if (initBg) {
                var imageIndex = Math.floor(Math.random() * 10 + 1) + ".jpg";
                $("body").css({"background-image": "url(images/bg" + imageIndex + ")"});
            }

            var windowHeight = $(window).height();
            var windowWidth = $(window).width();
            var left = (windowWidth - bgImgWidth) / 2;
            var top = (windowHeight - bgImgHeight) / 2;
            $("body").css({"backgroundPosition": left + "px " + top + "px"});
            var loginPaneWidth = $("#login-panel").outerWidth();
            var loginPaneHeight = $("#login-panel").outerHeight();
            var paneLeft = (windowWidth - loginPaneWidth) / 2;
            var paneTop = (windowHeight - loginPaneHeight) / 2;
            $("#login-panel").css({"left": paneLeft + "px", "top": paneTop + "px"});
            $("#login-panel").show();
        }




        function checkAndLogin(){
            let submitData = geneSubmitDataFromForm("#loginform",{});
            if(submitData['userCode']==''){
                $.messager.show({
                    title:'异常',
                    msg:'请填写用户名',
                    showType:'show'
                });
                return;
            }

            if(submitData['userPassword']==''){
                $.messager.show({
                    title:'异常',
                    msg:'请填写密码',
                    showType:'show'
                });
                return;
            }

            //登录
            postJSON('/login/getOtp', {},
                function (data) {
                    let otpcode = data['otpcode'];
                    let otp = data['otp'];
                    setMaxDigits(130);
                    let rsakey = new RSAKeyPair("10001", "10001", otp, 512); //公钥
                    let password = sha1(submitData['userPassword']);
                    let passwordenc = encryptedString(rsakey, password, RSAAPP.PKCS1Padding);
                    console.log('passwordenc:' + passwordenc);
                    submitData['userPassword'] = passwordenc;
                    submitData['otpCode'] = otpcode;

                    postJSON('/login/login', submitData,
                        function (data) {
                            let action = data['action'];
                            if ('0' == action) {
                                location.href = '/mainframe';
                            } else if ('10' == action) {
                                //需要绑定Google密钥
                                let googleauthenticatorbarcode = data['googleauthenticatorbarcode'];
                                let userid = data['userid'];
                                openBindGoogleAuthForm(userid,googleauthenticatorbarcode);
                            } else if ('11' == action) {
                                //需要进一步用Google密钥认证
                                $('#googleAuthDlg').dialog('open').dialog('setTitle', 'MFA二次认证');
                            } else if ('2' == action) {

                            }

                        }, function (result, resultdesc) {
                            $.messager.show({
                                title:'异常',
                                msg:result+'-'+resultdesc,
                                showType:'show'
                            });
                        }, function () {
                            alert(3)
                        }, function () {
                            $.messager.progress(COMMONPARAM_PROCESS);
                        }, function () {
                            $.messager.progress('close');
                        });
                }, function (result, resultdesc) {
                    $.messager.show({
                        title:'异常',
                        msg:result+'-'+resultdesc,
                        showType:'show'
                    });
                }, function () {
                    alert(3)
                }, function () {
                    $.messager.progress(COMMONPARAM_PROCESS);
                }, function () {
                    $.messager.progress('close');
                });

        }

        function openBindGoogleAuthForm(userid,googleauthenticatorbarcode){
            $("#bindauthimg").attr("src","data:image/png;base64,"+googleauthenticatorbarcode);
            $("#binduserid").val(userid);
            $('#bindGoogleAuthDlg').dialog('open').dialog('setTitle', '绑定MFACode');
        }

        function saveBindGoogleAuth(){
            if(!$('#bindGoogleAuthForm').form('validate')){
                return;
            }

            let submitData = geneSubmitDataFromForm("#bindGoogleAuthForm",{});
            postJSON('/login/bindGoogleAuth', submitData,
                function (data) {
                    $.messager.show({
                        title:'提示',
                        msg:'绑定成功，请继续登录',
                        showType:'show'
                    });
                    $('#bindGoogleAuthDlg').dialog('close')
                }, function (result, resultdesc) {
                    $.messager.show({
                        title:'异常',
                        msg:result+'-'+resultdesc,
                        showType:'show'
                    });
                }, function () {
                    alert(3)
                }, function () {
                    $.messager.progress(COMMONPARAM_PROCESS);
                }, function () {
                    $.messager.progress('close');
                });
        }

        function googleAuth(){
            if(!$('#googleAuthLoginForm').form('validate')){
                return;
            }

            let submitData = geneSubmitDataFromForm("#googleAuthLoginForm",{});
            postJSON('/login/googleAuth', submitData,
                function (data) {
                    $.messager.show({
                        title:'提示',
                        msg:'登录成功，即将跳转首页',
                        showType:'show'
                    });
                    location.href = '/mainframe';
                }, function (result, resultdesc) {
                    $.messager.show({
                        title:'异常',
                        msg:result+'-'+resultdesc,
                        showType:'show'
                    });
                }, function () {
                    alert(3)
                }, function () {
                    $.messager.progress(COMMONPARAM_PROCESS);
                }, function () {
                    $.messager.progress('close');
                });
        }
    </script>
</body>
</html>
</html>